<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja" style="height:100%;">
<head>
	<title>在職人数検索</title>

	<jsp:include page="../basePage/head.jsp" />	 
    <script src="./js/util/globalajaxevent.js"></script>
       
	<style type="text/css">	
		#caseName{width:100px;}	 
	</style>  
 <script>
 
 
	
	 $(function() {		
		
		 var exportExcel = '${exportExcel}';
		if (exportExcel=='true'){
			$('#buttonExport').show(); 
		}else{ 
			$('#buttonExport' ).hide();
		}
		 
		 var d = new Date();
		 d.setDate(d.getDate() -1);
		 var toDate =formatDate(	d.getFullYear()+'-'+(d.getMonth()+ 1)+'-'+(d.getDate()) );
		 d.setDate(d.getDate() - 10);
		 var fromDate =formatDate(	d.getFullYear()+'-'+(d.getMonth()+ 1)+'-'+(d.getDate()) );
	 	 
 	
		//日期选择框格式化
 		$( "#dateFrom" ).datepicker({ dateFormat: 'yy-mm-dd'}).val(fromDate);;
		$( "#dateTo" ).datepicker({ dateFormat: 'yy-mm-dd'}).val(toDate);  
		 
		 
 		      	
		$( "#buttonSearch" ).button().click(function( event ) {	 
	 
		$('#EmpInfoWorkEmpTable,#EmpInfoUnitWorkEmpTable').empty();
		 	
		$.ajax({
			        type: "POST",
			        async: true,
			        url:"empInfoWorkEmpQuery!refreshData.action",
			        data:$('#dataForm').serialize(),
					success: function (data) {
						if(data == null ||
						   data.length==0 || 
						   data.tableData.EmpInfoWorkEmpTable.length ==0 ||
						   data.tableData.EmpInfoUnitWorkEmpTable.length ==0 ){
							
							 $( "#noResult" ).dialog({modal:true});
							return;
						}
						
					 
						 
						outputGrid('EmpInfoWorkEmpTable',data.tableData.EmpInfoWorkEmpTable,"在職人員数統計情報");
						outputGrid('EmpInfoUnitWorkEmpTable',data.tableData.EmpInfoUnitWorkEmpTable,"ユニット在職人員数統計情報");
						
						var divWidth=$("#EmpInfoWorkEmpTable").width();
						
						$("#EmpInfoWorkEmpTable_datagrid").setGridWidth(divWidth);
						var divWidth=$("#EmpInfoUnitWorkEmpTable").width();
						$("#EmpInfoUnitWorkEmpTable_datagrid").setGridWidth(divWidth);
						
						
					},
			        error: function (err) {
						alert(err);
			        }
				});
		 });
 		$(window).bind('resize', function() {	    	 	    	 
		 	$("#gridTable").setGridWidth($("#dataForm").width()-5);	    	 
		 	$("#gridTable").setGridHeight ($(window).height()-$("#dataForm").height()-108);	    	 
		}).trigger('resize');	
 		
		$( "#buttonExport").button().click(function( event ) {
			
			$('#dataForm').attr('action',"empInfoWorkEmpExport!export.action").submit();
		});
		
	});	 
	
	 
	 function outputGrid(target,data,caption){		
	  		$('#' + target ).empty();  		  	
			if(data == null || data.length==0  ) return;
			
	   		var row =[];
			for(var i=0;i<data.length  ;i++){				 							
				row.push($("<tr></tr>"));				 
			}  ;
			
		   	$('#' + target).empty().append('<table style="float:inherit" id=' + target + '_datagrid><tbody></tbody></table>');
			var table = $('#' + target + ' tbody');

		    var j=0;
	  		$.each(data,function(key,value){
	  			var index=0;
	  			$.each(value,function(k,v){  			  			
	  				var th = $("<th id =" + index + " nowrap='nowrap'></th>");
	  				var td = $("<td nowrap='nowrap'></td>");  		
	  	  		    if (j ==0 ){		
						th.append(v);
	  	  	        	th.appendTo(row[j]);
	  	  	        }
	  	  		    else{					  	  				
	  	  				td.append(v);
	  	  				td.appendTo(row[j]);
	  	  		    }
	  	  	    	index++;
	  			});  			
	  			j++;
	  		});
	  		for(var i=0;i<row.length;i++){
	  			row[i].appendTo(table);			
			};		

		 //set column width	
		  var ColModel='';
		  var Colwidth = 0;
		  for(var i=0;i<data[0].length  ;i++){				 							
		   if ( ColModel.length>0){
			   ColModel += ',';} 
		       
		       if (i==0){
		    	   Colwidth = 120;
		       } else {
		    	   Colwidth =40;
		       }
		  
			   ColModel += '{name:"' +i +'", index: "' + i+ '", width: ' + Colwidth+', align: "center",sortable:false} '; 
		  }  ;
			//alert(ColModel);	
	  		//tableToGrid(target + ' table',{
  	  	   tableToGrid('#' + target+"_datagrid",{
	  			//datatype: "local",  
	  			autoWidth:true,	  			
	  			height: "100%",           	  	
	         	caption: caption,	         
	         	colModel:eval("([" + ColModel + "])"),
				shrinkToFit: false				
				 ,gridComplete:function(){				
					 formatTable(target);
				 }    
	  		  });       
		};	
	function formatTable(target){ 		  		  	
		$('#' + target + '_datagrid tr').each(function(){
  			
  		   $(this).children("td").eq(0).nextAll().css("text-align",'right');  
  		  // $(this).children("td").css("height",'33'); 
  		 
  		   $(this).children("td").eq(0).css("text-align",'center');  
  		 	var v=$.trim( $(this).children("td").eq(0).text());
			if ( v=="超級" ||
					v=="高級" ||
					v=="一級" ||
					v=="二級" ||
					v=="三級" ||
					v=="四級" ||
					v=="五級" ||
					v=="Eチェック" ){
	    		
				$(this).children("td").eq(0).css("background", "#EAFFFF");
			}else if ( v=="合計"){
				$(this).children("td").css("background", "#EAFFFF");
			}
			else{
				$(this).children("td").eq(0).css("background", "#E4FFE4");
			}
				
			
			
		});	 
  	}
	</script>

</head>
<body>

<s:form id="dataForm" theme="simple" >			
	<table style="white-space:nowrap">
		<tr>
		 	<th>時間帯</th><td><s:textfield id="dateFrom" name="dateFrom" key="value" label="开始日" cssClass="datebox" /></td>				
			<th>～</th><td><s:textfield id="dateTo" name="dateTo" key="value" label="结束日"  cssClass="datebox" /></td>
			<td width=30></td>
			<td><a id="buttonSearch" href="#" id="buttonSearch" class="button">検索</a></td>		
			<td><a id="buttonExport" href="#" style="width:100px" class="button"  >エクスポート</a></td>	
			<td>
				<span id="myIndicator"  >
					<img  width=25 height=20 src="./img/ajax-loader.gif" alt="ロード中..." />ロード中....
				</span>
			 </td>		
		</tr>
	</table>
</s:form>
 
<hr>
<div id="dataContainer" style="position:absolute;overflow: auto!important;top:35px;bottom:0px;width:100%;">  
 	<div id="EmpInfoWorkEmpTable"  class="grid"></div>
 	<div id="EmpInfoUnitWorkEmpTable"  class="grid"></div>  
 	
 	<div id="noResult" title="メッセージ" style="display:none;">
 		 <p>该当する検索结果がありません。</p>
         <p>别の条件でもう一度検索してください。</p>
	</div>
 	
</div>
</body>
</html>